<script lang="ts">
enum BookState{
    Temp=0,
    Collecting=1,
    Collected=2,
    Downloading=3,
    Downloaded=4
}
export default {
    data() {
        return {
            book_dict:new Map(),
            active_id:-1,
            progress_timer:null,
            filter_word:'',
        }
    },
    methods:{
        async get_downloding_book(){
            const api='http://localhost:9999/books?tag=downloading'
            console.log('Reqeust for downloading book...')
            let res= await fetch(api)
            if (res.ok) {
                let data =await res.json()
                console.log('Get downloading book count:'+data.length)
                this.book_dict.clear()
                data.forEach(book => {
                    book.progress=Math.random()
                    this.book_dict.set(book.id,book)
                });
            }
        },
        format_progress(value){
            value=+value
            return Math.round(value*100)+'%'
        },
        async get_download_progress(){
            const api='http://127.0.0.1:9999/progress'  
            console.log('Request for download progress...')
            let res = await fetch(api)
            if (res.ok) {
                let data=await res.json()
                console.log('Get downlod progress:'+JSON.stringify(data))
                if (data.book_id>0) {
                    this.update_progress(data.book_id,data.value)
                }
            }else{
                alert('Get download progress failed!\t'+await res.text())
            }
            if (this.active_id>0) {
                setTimeout(() => {
                    this.get_download_progress()
                }, 2000);                
            }
        },
        update_progress(book_id,value){
            console.log('update progress')
            if(this.book_dict.has(book_id)==false){
                console.warn('book id not existed!')
                return
            }
            let book=this.book_dict.get(book_id)
                book.progress=value
                console.log(`Upate book[${book.title}] progress:`+value)
                if (value>=1) {
                    alert(`客官，《${book.title}》下载完了！`)
                    book.state=BookState.Downloaded
                    this.active_id=-1
                }
        }


    },
    computed:{
        filtered_books(){
            if(this.filter_word){
                let books=[]
                for (const [key,book] of this.book_dict) {
                    if (book.title.includes(this.filter_word)) {
                        books.push(book)
                    }
                }
                return books
            }else{
                return this.book_dict.values()
            }
        }
    },
    mounted(){
        this.get_downloding_book()
        // this.get_download_progress()
    }
}
</script>

<template>
    <div class="download-panel">
        <div class="filter">
            <input type="text" v-model="filter_word" placeholder="漫画太多？检索一下！">
        </div>
        <div class="item-container">
            <div class="download-item" :class="{active:book.id==active_id}" v-for="book in filtered_books" :key="book.id">
                <h1 class="book-title">{{book.title}}</h1>
                <div class="book-chapter">
                    <span class="chapter-label">章节数量:</span>
                    <span class="chapter-value">{{book.chapter_count}}</span>
                </div>
                <div class="progress-indicator">
                    <span class="progress-bar" :style="{ width: format_progress(book.progress) }"></span>
                    <span class="progress-value">{{ format_progress(book.progress) }}</span>
                </div>
                <div class="download-operation">
                    <a class="btn" v-if="active_id!=book.id">开始下载</a>
                    <a class="btn danger" v-else>暂停下载</a>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
    .download-panel{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .filter{
            margin:10px 0 20px
        }
        .item-container{
            overflow-y: scroll;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }
    .download-item{
        display: grid;
        grid-template-rows: auto 30px auto;
        width:90%;
        height: auto;
        margin: 0px 10px 10px;
        padding-bottom: 10px;
        border: 2px solid darkcyan;
        border-radius: 10px;
        .book-title{
            width: 100%;
            text-align: center;
        }
        .book-chapter{
            justify-self: center;
            font-size: 1.2rem;
            font-weight: 600;
        }
        .download-operation{
            display: flex;
            justify-content: space-evenly;
            
        }
    }

.progress-indicator {
    width: 80%;
    justify-self: center;
    // margin: 20px 0 0 5px;
    height: 20px;
    position: relative;
    border-radius: 20px;
    border: 1px solid darkcyan;
    overflow: hidden;
    .progress-bar {
        display: block;
        height: 100%;
        width: 20%;
        background-color: darkcyan;
    }
    .progress-value {
        display: block;
        position: absolute;
        text-align: center;
        left: 0;
        top: 0;
        width: 100%;
        font-weight: 600;
    }
}
</style>
